<template>
  <el-container class="total">
    <el-container style="height: 100%" class="pie-container">
      <div class="pie">
        <div class="pie-chart" ref="pieChart" style="width: 600px; height: 400px;"></div>
      </div>
    </el-container>
    <el-container style="height: 100%" class="chart">
      <div class="line">
        <div class="line-chart" ref="lineChart" style="width: 100%; height: 400px;"></div>
      </div>
    </el-container>
    <el-container style="height: 100%" class="trends-container">
      <div class="popular_aircraft" >
        <div class="aircraft">
          <span style="color:#dbe2ef;font-size: larger">飞得最多的机型</span>
          <div class="trend-data" style="width: 100%; height:100%;">
            <img src="https://www.flightaware.com/images/icons/icon-aircraft@2x.png"/>
            <a id="popular_aircraft" style="color: #dbe2ef;font-size: 26px">{{ popularAircraft }}</a>
            <span id="popular_flights" style="color:#dbe2ef"><strong>{{ totalFlights }}</strong> 航班总数</span>
          </div>
        </div>
          <div class="airplane">
            <span style="color:#dbe2ef;font-size: larger">最忙碌的机场</span>
            <div class="trend-data" style="width: 100%; height:100%;">
              <svg width="80" height="80" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24 44C24 44 40 32 40 19C40 10.7157 32.8366 4 24 4C15.1634 4 8 10.7157 8 19C8 32 24 44 24 44Z" fill="none" stroke="#ffffff" stroke-width="4" stroke-linejoin="miter"/><path d="M21 14V30" stroke="#ffffff" stroke-width="4" stroke-linecap="butt" stroke-linejoin="miter"/><path d="M21 14H27C29.2091 14 31 15.7909 31 18C31 20.2091 29.2091 22 27 22H21V14Z" fill="none" stroke="#ffffff" stroke-width="4" stroke-linejoin="miter"/></svg>
              <a id="popular_aircraft" style="color: #dbe2ef;font-size: 26px">{{ popularAirplane }}</a>
              <span id="popular_flights" style="color:#dbe2ef"><strong>{{ totalLines}}</strong> 航班总数</span>
            </div>
        </div>
      </div>
    </el-container>
  </el-container>
</template>

<script>
import {ref, onMounted} from 'vue';
import * as echarts from 'echarts';
import axios from 'axios';

export default {
  name: 'RouteProfile',

  setup() {
    const pieChart = ref(null);
    const lineChart = ref(null);
    const popularAircraft = ref('');
    const totalFlights = ref(0);
    const popularAirplane = ref('');
    const totalLines = ref(0);

    onMounted(async () => {
      try {
        // 获取飞行最多的机型和航班总数
        const response = await axios.get('http://localhost:8000/flights/popularData/Flights');
        popularAircraft.value = response.data.data.popularAircraft;
        totalFlights.value = response.data.data.totalFlights;
        // 获取飞行最多的机场和航班总数
        const planeResponse = await axios.get('http://localhost:8000/flights/popularData/Planes');
        popularAirplane.value = planeResponse.data.data.popularAirplane;
        totalLines.value = planeResponse.data.data.totalLines;
        // 获取饼图数据
        const pieResponse = await axios.get('http://localhost:8000/flights/RouteProfile');
        const pieData = pieResponse.data.data;

        if (!pieData || !pieData.data || !Array.isArray(pieData.data)) {
          throw new Error('Received pie chart data structure is not as expected');
        }

        // 初始化饼图
        const pieChartInstance = echarts.init(pieChart.value);
        const pieOptions = {
          title: {
            text: '出发地航班流量统计',
            left: 'center',
            textStyle: {
              color: '#fff',
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            left: 10,
            data: pieData.data.map(item => item.name),
            textStyle: {
              color: '#fff'
            }
          },
          series: [
            {
              name: '',
              type: 'pie',
              radius: ['50%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '20',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: pieData.data
            }
          ]
        };
        pieChartInstance.setOption(pieOptions);

        // 获取折线图数据
        const lineResponse = await axios.get('http://localhost:8000/flights/lineChartData');
        const lineData = lineResponse.data.data;

        if (!lineData || !lineData.dates || !lineData.counts || lineData.dates.length !== lineData.counts.length) {
          throw new Error('Received line chart data structure is not as expected');
        }

        // 初始化折线图
        const lineChartInstance = echarts.init(lineChart.value);
        const lineOptions = {
          backgroundColor: '#2D333E',
          title: {
            text: '不同日期的航班总量',
            left: 'center',
            textStyle: {
              color: '#fff',
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            }
          },
          xAxis: {
            type: 'category',
            data: lineData.dates,
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              color: '#fff',
              fontSize: 12,
              interval: 0, // 强制显示所有标签
              rotate: 45 // 旋转45度，防止重叠
            }
          },
          yAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              color: '#fff',
              fontSize: 12,
            }
          },
          series: [
            {
              name: '航班数量',
              type: 'line',
              data: lineData.counts,
              smooth: true, // 平滑曲线
              symbol: 'circle', // 折线点样式
              symbolSize: 8, // 折线点大小
              itemStyle: {
                color: '#FFD700' // 折线颜色
              },
              lineStyle: {
                color: '#FFD700' // 折线颜色
              },
              areaStyle: {
                color: 'rgba(255, 215, 0, 0.3)' // 区域填充颜色
              }
            }
          ]
        };
        lineChartInstance.setOption(lineOptions);

        // 窗口大小变化时重新调整图表大小
        window.addEventListener('resize', () => {
          pieChartInstance.resize();
          lineChartInstance.resize();
        });

        // 清理工作
        return () => {
          window.removeEventListener('resize', () => {
            pieChartInstance.resize();
            lineChartInstance.resize();
          });
        };
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    });

    return {
      pieChart,
      lineChart,
      popularAircraft,
      totalFlights,
      popularAirplane,
      totalLines,
    };
  }
};
</script>

<style scoped>
.aircraft,
.airplane {
  margin-bottom: 80px; /* 在上下布局中增加间距 */
}

.total {
  display: flex;
  flex-wrap: wrap; /* 确保在容器变小时自动换行 */
  width: 100%;
  justify-content: center; /* 居中对齐 */
}

.pie-container,
.chart,
.trends-container {
  background-color: #2D333E;
  flex: 1 1 30%; /* 允许容器在必要时收缩和扩展 */
  display: flex;
  justify-content: center;
  margin: 10px; /* 设置边距以避免穿模 */
  padding: 10px; /* 内边距 */
  box-sizing: border-box; /* 包括内边距和边框 */
}

.pie, .line{
  border-radius: 10px;
  border: 3px solid #dbe2ef; /* 白色边框 */
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
  margin: 10px 0; /* 设置边距 */
  display: flex;
  justify-content: center;
  align-items: center;
}
.popular_aircraft{
  border-radius: 10px;
  border: 3px solid #dbe2ef; /* 白色边框 */
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
  margin: 10px 0; /* 设置边距 */
  flex-direction: column; /* 垂直方向排列 */
  display: flex;
  justify-content: center;
  align-items: center;
}
.pie-chart, .line-chart {
  width: 100%;
  height: 100%;
}

.trend-data {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.trend-data img {
  width: 50px;
  height: 50px;
  margin-right: 10px;
}

.trend-data a {
  margin-left: 10px;
  font-weight: bold;
}

.trend-data span {
  margin-left: 10px;
  color: #dbe2ef;
}

/* 添加媒体查询以确保在屏幕变小时样式依然良好 */
@media (max-width: 768px) {
  .pie-container, .chart, .trends-container {
    flex: 1 1 100%; /* 在小屏幕上全宽 */
    margin: 5px; /* 减少边距以适应小屏幕 */
  }
}

@media (max-width: 480px) {
  .pie, .line, .popular_aircraft {
    padding: 5px; /* 减少内边距 */
    margin: 5px 0; /* 减少外边距 */
  }

  .trend-data {
    flex-direction: column; /* 纵向排列 */
  }

  .trend-data img {
    margin: 0 0 10px 0; /* 调整图片边距 */
  }
}
</style>

